<template>
  <div>
    <el-button @click="addrole" class="add">添加用户</el-button>
    <!-- <el-button class="find" @click="toDistribution">用户分布</el-button> -->
    <!-- 显示栏 -->
    <el-table :data="role.list" style="width: 100%">
      <el-table-column align="center" prop="id" label="编号"> </el-table-column>
      <el-table-column align="center" prop="realname" label="真实姓名">
      </el-table-column>
      <el-table-column align="center" prop="idCard" label="身份证号">
      </el-table-column>
      <el-table-column align="center" prop="username" label="用户名">
      </el-table-column>
      <el-table-column align="center" prop="password" label="密码">
      </el-table-column>

      <el-table-column align="center" prop="gender" label="性别">
      </el-table-column>
      <el-table-column
        align="center"
        prop="registerTime"
        :formatter="fmt"
        label="用户建立时间"
      >
      </el-table-column>
      <el-table-column align="center" prop="address" label="居住地址">
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template v-slot="scope">
          <span style="margin-right: 5px" @click="delete_role(scope.row.id)"
            >删除</span
          >
          <span @click="edit_role(scope.row)">修改</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="obj.pageSize"
      :current-page="obj.page"
      @current-change="changerole"
      :total="role.total"
    >
    </el-pagination>
    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="dialog_role" width="70%">
      {{ form_role }}
      <el-form :model="form_role" :rules="rules" ref="form_role">
        <el-form-item
          label="真实姓名"
          prop="realname"
          :label-width="formLabelWidth_role"
        >
          <el-input v-model="form_role.realname" placeholder="字符不宜超过5位" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item
          label="身份证号"
          prop="idCard"
          :label-width="formLabelWidth_role"
        >
          <el-input v-model="form_role.idCard" placeholder="格式长度：18位" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="用户名"
          prop="username"
          :label-width="formLabelWidth_role"
        >
          <el-input v-model="form_role.username" autocomplete="off" placeholder="格式最大长度为10位"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
          :label-width="formLabelWidth_role"
        >
          <el-input
            v-model="form_role.password"
            autocomplete="off"
            show-password
            placeholder="格式最大长度为10位"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item
          label="确认密码"
          prop="checkpass"
          :label-width="formLabelWidth_role"
        >
          <el-input
            v-model="form_role.checkpass"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item> -->
        <el-form-item label="性别" :label-width="formLabelWidth_role">
          <el-radio v-model="form_role.gender" label="男">男</el-radio>
          <el-radio v-model="form_role.gender" label="女">女</el-radio>
        </el-form-item>
        <el-form-item label="建立时间" :label-width="formLabelWidth_role">
          <el-input v-model="form_role.registerTime" disabled></el-input>
        </el-form-item>
        <el-form-item label="居住地" :label-width="formLabelWidth_role">
          <el-cascader
            v-model="form_role.address"
            :options="pca"
            placeholder="请选择地址"
            :props="{ expandTrigger: 'hover', label: 'name', value: 'name' }"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('form_role')">重置</el-button>
        <el-button type="primary" @click="save_role('form_role')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
// 导入moment
import moment from "moment";
import pca from "../../assets/pca.json";
export default {
  computed: {
    ...mapState("role", ["role"]),
  },
  created() {
    this.Allrole(this.obj);
  },

  data() {
    // var checkidCard = (rule, value, callback) => {
    //     if (!value) {
    //       return callback(new Error('年龄不能为空')),
    //     },
    
    return {
      pca,
      obj: {
        page: 1,
        pageSize: 10,
      },
      // add:[],
      form_role: {
        status: "正常",
      },
      //表单验证
      rules: {
        realname: [
          { required: true, message: "请输入真实姓名", trigger: "blur" },
          { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" },
        ],
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" },
        ],
        idCard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { min: 18, max: 18, message: "长度在18个字符", trigger: "blur" },
          // { validator: checkidCard, trigger: "blur" },
        ],
      },
      //模态框属性
      title: "添加用户",
      dialog_role: false,
      formLabelWidth_role: "120px",
      form_role: {},
    };
  },

  watch: {
    obj: {
      handler: function () {
        this.Allrole(this.obj);
      },
      deep: true,
    },
    // form_role: {
    //   handler: function () {
    //     let add = this.form_role.address;
    //   },
    //   deep: true,
    // }
  },
  methods: {
    ...mapActions("role", ["Allrole", "Save_role", "Deleterole"]),
    //时间戳转换日期格式
    fmt(row, column) {
      return moment(row.registerTime).format("YYYY-MM-DD HH:mm:ss");
    },
    // //统计用户分布数量
    // toDistribution() {
    //   this.$router.push({
    //             // 路由跳转
    //             path:'/role/distribution',
    //         })
    // },
    addrole() {
      this.dialog_role = true;
      this.form_role.registerTime = moment().format("YYYY-MM-DD HH:mm:ss");
    },
    changerole(page) {
      this.obj.page = page;
    },
    //添加用户
    save_role(val) {
      this.title = "添加用户";
      // 转换回时间戳
      this.form_role.registerTime = new Date(
        this.form_role.registerTime
      ).getTime();
      //地址格式数组转换成字符串
      this.form_role.address = this.form_role.address.join(",");
      this.$refs[val].validate((valid) => {
        if (valid) {
          alert("验证成功!");
          this.Save_role(this.form_role).then((res) => {
            this.dialog_role = false;

            this.Allrole(this.obj);
            //模态框清空
            this.form_role = {};
          });
        } else {
          console.log("验证失败!!");
        }
      });
    },
    resetForm(form_role) {
      // this.$refs[form_role].resetFields();
      this.form_role = {};
    },
    //修改用户
    edit_role(val) {
      this.title = "用户修改";
      this.dialog_role = true;
      this.form_role = JSON.parse(JSON.stringify(val));
      // console.log(typeof this.form_role.address);
      this.form_role.address = this.form_role.address.split(",");
      //时间戳再转换为日期格式
      this.form_role.registerTime = moment(this.form_role.registerTime).format(
        "YYYY-MM-DD HH:mm:ss"
      );

      // this.form_role.address =  JSON.stringify(this.form_role.address);
      // this.form_role.address = JSON.parse(JSON.stringify(this.form_role.address));
    },
    // 删除用户
    delete_role(id) {
      alert("删除成功");
      this.Deleterole(id).then((res) => {
        this.Allrole(this.obj);
      });
    },
  },
};
</script>

<style  scoped>
.add {
  float: left;
}
/* .find{
  float:right;
} */
</style>

